HTML Files

All pages for Launchkit are housed inside their own .html file. These files must reside in the root directory of the template (eg. launchkit/blog.html) in order to access the relevant CSS and Javascript files necessary for correct display.

HTML pages created with Variant Page Builder should also be placed in this same root directory.

CSS Files

The main styles for the Launchkit template are housed inside theme.css (or theme-xxxx.css depending on which colour scheme you're using). Styles for both desktop and mobile responsive are housed within this file and can be edited anytime. If you are planning to make custom edits to the style of your website, we suggest using the included custom.css file. This will make updating Launchkit a much smoother process as you can simply replace the updated theme.css file in its entirety.

The custom.css file is references in the head like so, make your own styles and overrides in this file only.

>link href="css/custom.css" rel="stylesheet" type="text/css" media="all"/<

*Note: When you update Launchkit - be sure to keep this file intact, if you overwrite it - you will lose all your custom styles!

LESS Files

If you're familiar with LESS, you can dive right into the less/ folder to find all associated LESS files (including all default Bootstrap files). The theme.less files include useful mixins and variables (such as colour schemes, standard spacing etc.)

* Note: If you are getting errors when attempting to compile theme.less in an online compiler, this is because theme.less includes references to a couple of Bootstrap less files (at the top). An OS compiler is recommended so the compiler has full access to all necessary files.

Javascript Files

scripts.js is the central javascript file in use for Launchkit. This file houses all plugin initialisations such as Flexslider, Twitterfetcher, Spectragram etc. It's also where the code for processing contact forms lives.

Bootstrap Grid

Launchkit is based on Bootstrap 3.1 and uses the default Bootstrap 12 column grid system for the underlying structure of each section. Each use of the grid should be wrapped in both a container and row element. Below is a brief example for a section with three equal columns (3 for tablet and up, 6 for smartphones).

<div class="container">
	<div class="row">
		<div class="col-md-4 col-sm-6">...</div>
		<div class="col-md-4 col-sm-6">...</div>
		<div class="col-md-4 col-sm-6">...</div>
	</div>
</div>
								

For a more detailed explanation of the Bootstrap grid - see the Bootstrap documentation here

Slider Types

Launchkit uses Flexslider for all slider functionality. By default, there are 3 slider types:

• Hero sliders (.hero-slider) - Large image sliders found in headers and large dividing sections. By default these sections will include slider pagination in the bottom center.
• Testimonials sliders (.testimonials) - Text slider that features pagination at the bottom center.

Initializing a slider

The slider initializations all take place in scripts.js. To initialize a new slider type - do it inside scripts.js

HTML:

<div class="my-new-slider">
	<ul class="slides">
		<li>...</li>
		<li>...</li>
	</ul>
</div>

Javascript:

$('.my-new-slider').flexslider({ options go here });

Common Questions

How do I change the slider timing?

Inside the slider initialization you have access to the 'slideshowSpeed' option, use it like so:

$('.my-new-slider').flexslider({ slideshowSpeed: 8000 });

The slideshow speed option is measured in milliseconds, 8000 would be 8 seconds.

How do I adjust the slide height?

Inside CSS you can set the height for the slides. The default hero-slider heights can be accessed like so:

.hero-slider .slides li{ height: 800px; }

How do I enable slider arrows?

Inside the slider initialization you have acces to the 'directionNav' option, use it like so:

$('.my-new-slider').flexslider({ directionNav: true });

Launchkit uses a custom Icon Kit contrsucted using Fontastic. For a full reference list for each icon go here

Icon Syntax

Icons use the 'i' element and each have their own unique class which dictates which glyph is shown. For a full list of available classes, see the link provided above.

<i class="icon-twitter"></i>

This code would result in the Twitter bird icon.

Many elements in Launchkit, such as the hero slider elements feature full-width image backgrounds. These backgrounds are set to cover the entirety of the element they are nested within.

Covering an element with a background

Some basic HTML markup is require to cover an element with an image background. Just set the source of your image and Launchkit will do the rest.

<div class="background-image-holder">
	<img alt="Background Image" class="background-image" src="img/my-image.jpg" />
</div>

* Note: This method uses the CSS background-size: cover property to achieve the effect. This means that as the screen width is decreased, the image will be cropped toward the center of the image. If you'd like to adjust the position of the background for smaller screens, use the background-position property like so:

@media all and (max-width:767px){
	.background-element{ background-position: 20% 40%; }
}

Launchkit comes with a number of pre-built colour schemes. Using Variant, you can change the colour scheme simply by clicking the 'Colour Scheme' tab in the style sidebar and selecting your desired scheme from the swatches.

Switching schemes with CSS

Outside of Variant you will need to include the appropriate CSS file in the head of your document. For example, if you wanted to use the 'Velvet' colour scheme you would include the following:

<link href="css/theme-velvet.css" rel="stylesheet" type="text/css" media="all"/>

Creating schemes with LESS

With the included LESS files, you can easily create your own custom colour scheme. This requires you to simply change the value of the @color-primary variable inside theme.less. All other colours will be automatically generated from the @color-primary variable - this makes generating new schemes quick and easy.

Any element in Launchkit that has a white background by default can be altered to have a dark background. This can be done in two ways:

Switching 'Dark Skin' on in Variant

As you hover over an eligible section you will see a cog appear in the right-hand corner. Click the cog and then click the 'Dark Skin' toggle.

Adding the CSS class manually

Alternatively, if you're not using Variant you can add the class 'bg-dark' to any section that has a white background by default as in the example below:

<section class="features features-1 bg-dark">...</section>

Some elements in Launchkit offer the ability to embed an Instagram image feed. These elements use a data attribute 'data-user-name' in conjunction with the Spectragram jQuery plugin to fetch the latest images from the specified Instragram account.

Using the data attribute

Setting up an Instagram element is as simple as placing your username inside the data attribute like so:

<div class="instafeed" data-user-name="my-account-name">
	<ul></ul>
</div>

Troubleshooting

By default, the Spectragram plugin is setup using our own Client ID and Access Token - if you have any issue using this feature, you should create your own Client ID and Access Token and place theme inside scripts.js (~line 262)

To gain access to your Client ID and Access Token, use this tutorial: http://jelled.com/instagram/access-token

The Twitter feed element uses a HTML5 data attribute called 'data-widget-id' to determine which feed to display. Changing it requires you to create a widget from your Twitter account.

Creating a widget on Twitter

• Go to the 'Settings' page of your Twitter account and clicking 'Widgets'
• Click 'Create New' and then 'Create Widget'
• Go back to the 'Widgets' page and click 'Edit' on your newly created widget
• From here you need to copy the widget id out of the url bar. The widget id is the long numerical string after /widgets/ and before /edit and paste it into the 'data-widget-id' attribute on the tweets div.

Twitter element markup

Once you've got your widget ID, paste it into the data-widget-id element of the tweets div. Leave the tweets div empty, it will be populated by the Twitterfetcher plugin when the page loads.

<div id="tweets" data-widget-id="492085717044981760"></div>